<template>
  <div class="category-ratio">
    <div class="category-ratio__header">
      <span>价格类型</span>

      <div class="dss2">
        <el-radio-group v-model="optype" size="mini" @change="changeType">
          <el-radio-button label="一口价" />
          <el-radio-button label="浮动价" />
          <el-radio-button label="全部" />
        </el-radio-group>
      </div>
    </div>
    <div class="clearfix">
      <div class="dss fr">
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format-value="yyyy-MM-dd HH:mm:ss"
          align="right"
          size="mini"
          @change="changeDate"
        />
      </div>
    </div>

    <div class="category-ratio__container">
      <e-charts ref="echarts" :option="chartOptions" autoresize />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      optype: '全部',
      chartOptions: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          bottom: 30,
          left: 'center',
          data: ['一口价', '浮动价', '其他']
        },
        color: ['#3AA1FF', '#36CBCB', '#F2637B'],
        series: [
          {
            name: '操作来源',
            type: 'pie',
            radius: ['50%', '60%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,

            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            label: {
              show: true
            },
            labelLine: {
              show: true
            },
            data: [{
              value: 0,
              name: '一口价'
            }, {
              value: 0,
              name: '浮动价'
            }, {
              value: 0,
              name: '其他'
            }],
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 4
            },
            roundCap: 1
          }
        ]
      },
      table: {
        columns: [
          {
            label: '排名',
            prop: 'a',
            align: 'center',
            width: 60,
            type: 'op',
            layout: ['slot-rank']
          },
          {
            label: '场站名',
            prop: 'name',
            align: 'center',
            'min-width': 180
          },
          {
            label: '工单数量',
            prop: 'num1',
            align: 'center',
            'min-width': 100
          }
        ]
      },
      tableList: [],
      topInfo: {},
      excepnum: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value2: []
    }
  },
  created() {
    this.getInfo()
  },

  methods: {
    formatDate(val) {
      // console.log('val', val)
      // console.log('val', val.format("yyyy-MM-dd hh:mm:ss"))
      if (val !== '' && val !== undefined) {
        return val.format('yyyy-MM-dd hh:mm:ss')
      }
    },

    changeDate() {
      if (this.value2[0] && this.value2[1]) {
        this.getInfo('', this.formatDate(this.value2[0]), this.formatDate(this.value2[1]))
      }
    },
    changeType() {
      this.getInfo(this.optype, this.formatDate(this.value2[0]), this.formatDate(this.value2[1]))
    },
    getInfo(optype, startTime, endTime) {
      // console.log('startTime, endTime', startTime, endTime)
      // let optypeval = ''
      // if (this.optype === '升锁') {
      //   optypeval = 1
      // }
      // if (this.optype === '降锁') {
      //   optypeval = 2
      // }
      // if (this.optype === '全部') {
      //   optypeval = ''
      // }
      // this.$service.home.getInfo({
      //   startTime: startTime,
      //   endTime: endTime,
      //   optype: optypeval
      // }).then((res) => {
      //   // this.topInfo = res.topInfo.info4
      //   // this.tableList = res.workerOrder.terminalOrderList
      //   // this.excepnum = res.workerOrder.excepnum
      //   const arr = []
      //   res.leibie.wx && arr.push({ value: res.leibie.wx, name: '小程序控锁' })
      //   res.leibie.service && arr.push({ value: res.leibie.service, name: '服务器控锁' })
      //   res.leibie.other && arr.push({ value: res.leibie.other, name: '其他' })

      //   this.chartOptions.series[0].data = arr
      //   console.log('arr', this.chartOptions)
      //   if (this.$refs['echarts'] && this.$refs['echarts'].inst) {
      //     this.$refs['echarts'].inst.setOption(this.chartOptions)
      //   }
      // })
    },
    onLoad({ ctx, app }) {

    }
  }
}
</script>

<style lang="scss" scoped>
.category-ratio {
  &__header {
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 15px;
    font-weight: bold;
    color: $color-main;
    padding: 0 20px;
  }

  &__container {
    height: 415px;
    padding: 0 20px;
    box-sizing: border-box;

    .echarts {
      width: 100%;
    }
  }
}

.dss{
    margin-right: 20px;
  margin-top: 5px;
}

.dss2{
  margin-left: 220px;
  margin-top: 5px;
}
</style>
